<template>
  <div>
    <script id="editor" type="text/plain" />
  </div>
</template>

<script>
import '../../../public/static/ueditor/jquery-2.2.3.js'
import '../../../public/static/ueditor/ueditor.config.js'
import '../../../public/static/ueditor/ueditor.all.min.js'
import '../../../public/static/ueditor/lang/en/en.js'
export default {
  name: 'UEditor',
  props: {
    defaultMsg: {
      type: String,
      default: ''
    },
    attribute: {
      type: Object,
      default:() => ({})
    },
    id: {
      type: String,
      default: ''
    },

  },
  data() {
    return {
      editor: null,
      config: {
        zIndex: 50,
        initialFrameWidth: null,
        initialFrameHeight: 280,
        toolbars: [
          [
            'fullscreen',
            'source',
            'undo',
            'redo',
            'bold',
            'italic',
            'underline',
            'strikethrough',
            'fontfamily',
            'fontsize',
            'forecolor',
            'backcolor',
            'justifyleft',
            'justifyright',
            'justifycenter',
            'justifyjustify',
            'insertorderedlist',
            'insertunorderedlist',
            'insertimage',
            // 'selectall',
            'preview'
          ]
        ],
        autoHeightEnabled: false,
        autoFloatEnabled: true,
        initialContent: 'Please enter something', // 初始化编辑器的内容,也可以通过textarea/script给值，看官网例子
        autoClearinitialContent: true, // 是否自动清除编辑器初始内容，注意：如果focus属性设置为true,这个也为真，那么编辑器一上来就会触发导致初始化的内容看不到了
        BaseUrl: '',
        UEDITOR_HOME_URL: 'static/ueditor/'
      }
    }
  },
  beforeDestroy() {
    var child = document.getElementById("edui_fixedlayer");
    child.parentNode.removeChild(child);
    // 组件销毁的时候，要销毁 UEditor 实例
    if (this.editor !== null && this.editor.destroy) {
      this.editor.destroy();
    }
  },
  mounted() {
    this.editor = UE.delEditor('editor')
    let _this = this
    Object.assign(this.config, this.attribute)
    this.editor = UE.getEditor('editor', this.config)
    this.editor.addListener('ready', function() {
      _this.editor.setContent(_this.defaultMsg) // 确保UE加载完成后，放入内容。
    })
  },
  methods: {
    getUEContent() {
      // 获取内容方法
      return this.editor.getContent()
    },
    getUEContentTxt() {
      // 获取纯文本内容方法
      return this.editor.getContentTxt()
    }
  }
}
</script>
